<!doctype html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Undex - Modern Admin Template</title>

    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.png">

    <!-- These plugins only need for the run this page -->
    <link rel="stylesheet" href="css/default-assets/jquery.bootstrap-touchspin.min.css">
    <link rel="stylesheet" href="css/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="css/default-assets/color-picker-bootstrap.css">
    <link rel="stylesheet" href="css/default-assets/daterange-picker.css">
    <link rel="stylesheet" href="css/default-assets/form-picker.css">
    <link rel="stylesheet" href="css/default-assets/select2.min.css">


    <!-- Master Stylesheet [If you remove this CSS file, your file will be broken undoubtedly.] -->
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <!-- Preloader -->
    <div id="preloader"></div>

    <!-- Choose Layout -->
    <div class="choose-layout-area">
        <div class="setting-trigger-icon" id="settingTrigger">
            <i class="ti-settings"></i>
        </div>
        <div class="choose-layout" id="chooseLayout">
            <h6 class="mb-30">Choose A Layout</h6>
            <div class="demos-content">
                <div class="single-demos">
                    <a href="index-2.html"><img src="img/demo/1.png" alt=""></a>
                    <span>Vertical Dark</span>
                </div>
                <div class="single-demos">
                    <a href="http://demo.riktheme.com/undex-1/side-menu/index.html"><img src="img/demo/2.png" alt=""></a>
                    <span>Vertical Light</span>
                </div>
                <div class="single-demos">
                    <a href="http://demo.riktheme.com/undex-1/side-menu-gradient/index.html"><img src="img/demo/3.png" alt=""></a>
                    <span>Sidebar Gradient</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================================
    ******* Page Wrapper Area Start **********
    ======================================= -->
    <div class="ecaps-page-wrapper">
        <!-- Sidemenu Area -->
        <div class="ecaps-sidemenu-area">
            <!-- Desktop Logo -->
            <div class="ecaps-logo">
                <a href="index-2.html"><img class="desktop-logo" src="img/core-img/logo.png" alt="Desktop Logo"> <img class="small-logo" src="img/core-img/small-logo.png" alt="Mobile Logo"></a>
            </div>

            <!-- Side Nav -->
            <div class="ecaps-sidenav" id="ecapsSideNav">
                <!-- Side Menu Area -->
                <div class="side-menu-area">
                    <!-- Sidebar Menu -->
                    <nav>
                        <ul class="sidebar-menu" data-widget="tree">
                            <li class="sidemenu-user-profile d-flex align-items-center">
                                <div class="user-thumbnail">
                                    <img src="img/member-img/1.png" alt="">
                                </div>
                                <div class="user-content">
                                    <h6>Ajoy Das</h6>
                                    <span>Pro User</span>
                                </div>
                            </li>
                            <li><a href="index-2.html"><i class="icon_lifesaver"></i> <span>Dashboard</span></a></li>
                            <li><a href="widgets.html"><i class="icon_cog"></i> <span>Widgets</span></a></li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_laptop"></i> <span>Apps</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="calendar.html">- Calendar</a></li>
                                    <li><a href="chat-box.html">- Chat box</a></li>
                                    <li><a href="project-list.html">- Project List</a></li>
                                    <li><a href="project-details.html">- Project Details</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_drive"></i> <span>UI kit</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="avatar.html">- Avatar</a></li>
                                    <li><a href="buttons.html">- Button</a></li>
                                    <li><a href="card.html">- Card</a></li>
                                    <li><a href="slider.html">- Slider</a></li>
                                    <li><a href="modals.html">- Modals</a></li>
                                    <li><a href="toastr.html">- Toastr</a></li>
                                    <li><a href="preloader.html">- Preloader</a></li>
                                    <li><a href="tab.html">- Tab</a></li>
                                    <li><a href="general.html">- General</a></li>
                                    <li><a href="progressbar.html">- Progressbar</a></li>
                                    <li><a href="notifications.html">- Notification</a></li>
                                    <li><a href="dropdown.html">- Dropdown</a></li>
                                    <li><a href="typography.html">- Typography</a></li>
                                </ul>
                            </li>
                            <li><a href="inbox.html"><i class="icon_globe-2"></i> <span>Email</span></a></li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_easel"></i> <span>Charts</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="heigh-chart.html">- Heigh Chart</a></li>
                                    <li><a href="flot-chart.html">- Flot Chart</a></li>
                                    <li><a href="metricas-chart.html">- Metrica Chart</a></li>
                                    <li><a href="chartist.html">- Chartist Chart</a></li>
                                    <li><a href="google-chart.html">- Google Chart</a></li>
                                    <li><a href="morris-chart.html">- Morris Chart</a></li>
                                    <li><a href="peity-chart.html">- Peity Chart</a></li>
                                    <li><a href="chart-js.html">- Chart Js</a></li>
                                    <li><a href="c3-charts.html">- C3 Chart</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_document_alt"></i> <span>Pages</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="blank.html">- Start Page</a></li>
                                    <li><a href="profile.html">- Profile</a></li>
                                    <li><a href="profile-2.html">- Profile 2</a></li>
                                    <li><a href="ribbons.html">- Ribbons</a></li>
                                    <li><a href="clipboard.html">- Clipboard</a></li>
                                    <li><a href="todo-list.html">- Todo List</a></li>
                                    <li><a href="light-box-gallery.html">- Light Box Gallery</a></li>
                                    <li><a href="gallery.html">- Gallery</a></li>
                                    <li><a href="range-slider.html">- Range Slider</a></li>
                                    <li><a href="timeline.html">- Timeline</a></li>
                                    <li><a href="timeline-2.html">- Timeline 2</a></li>
                                    <li><a href="sweet-alert.html">- Sweet Alert</a></li>
                                    <li><a href="nestable-list.html">- Nestable List</a></li>
                                </ul>
                            </li>

                            <li class="treeview active">
                                <a href="javascript:void(0)"><i class="icon_documents_alt"></i> <span>Forms</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li class="active"><a href="basic-form.html">- Basic Form</a></li>
                                    <li><a href="form-validation.html">- Validation</a></li>
                                    <li><a href="rating.html">- Rating</a></li>
                                    <li><a href="form-switchers.html">- Switchers</a></li>
                                    <li><a href="file-upload.html">- File upload</a></li>
                                    <li><a href="form-input-mask.html">- Input Mask</a></li>
                                    <li><a href="form-wizard.html">- Form Wizard</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_cart_alt"></i> <span>Ecommerce</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="product.html">- Products</a></li>
                                    <li><a href="product-details.html">- Products Details</a></li>
                                    <li><a href="order.html">- Orders</a></li>
                                    <li><a href="cart.html">- Cart</a></li>
                                    <li><a href="checkout.html">- Checkout</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_table"></i> <span>Tables</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="basic-table.html">- Basic Table</a></li>
                                    <li><a href="data-table.html">- Data Table</a></li>
                                    <li><a href="table-layout-colourd.html">- Table Layout Color</a></li>
                                    <li><a href="price-table.html">- Price Table</a></li>
                                    <li><a href="edit-table.html">- Edit Table</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_key_alt"></i> <span>User Page</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="login.html">- Login</a></li>
                                    <li><a href="register.html">- Register</a></li>
                                    <li><a href="lock-screen.html">- Lock Screen</a></li>
                                    <li><a href="forget-password.html">- Forget Password</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_genius"></i> <span>General Pages</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="video.html">- Video</a></li>
                                    <li><a href="session-timeout.html">- Session timeout</a></li>
                                    <li><a href="invoice.html">- Invoice</a></li>
                                    <li><a href="contact.html">- Contact</a></li>
                                    <li><a href="coming-soon.html">- Coming Soon</a></li>
                                    <li><a href="404.html">- 404</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_map_alt"></i> <span>Maps</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="google-map.html">- Google Map</a></li>
                                    <li><a href="vector-map.html">- Vector Map</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_shield"></i> <span>Icons</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="matarial-icons.html">- Materialize Icons</a></li>
                                    <li><a href="elegant-icons.html">- Elegant Icons</a></li>
                                    <li><a href="et-line-icons.html">- Et-line Icons</a></li>
                                    <li><a href="font-awesome.html">- Font-Awsome Icons</a></li>
                                    <li><a href="pe-7-stroke.html">- Pe-7 Stroke Icons</a></li>
                                    <li><a href="themify-icons.html">- Themify Icons</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_menu"></i> <span>Multilevel</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="#">Level One</a></li>
                                    <li class="treeview">
                                        <a href="#">Level One <i class="fa fa-angle-right"></i></a>
                                        <ul class="treeview-menu">
                                            <li><a href="#">Level Two</a></li>
                                            <li><a href="#">Level Two</a></li>
                                            <li><a href="#">Level Two</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Level One</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="ecaps-page-content">
            <!-- Top Header Area -->
            <header class="top-header-area d-flex align-items-center justify-content-between">
                <div class="left-side-content-area d-flex align-items-center">
                    <!-- Mobile Logo -->
                    <div class="mobile-logo mr-3 mr-sm-4">
                        <a href="index-2.html"><img src="img/core-img/small-logo.png" alt="Mobile Logo"></a>
                    </div>

                    <!-- Triggers -->
                    <div class="ecaps-triggers mr-1 mr-sm-3">
                        <div class="menu-collasped" id="menuCollasped">
                            <i class="zmdi zmdi-menu"></i>
                        </div>
                        <div class="mobile-menu-open" id="mobileMenuOpen">
                            <i class="zmdi zmdi-menu"></i>
                        </div>
                    </div>

                    <!-- Left Side Nav -->
                    <ul class="left-side-navbar d-flex align-items-center">
                        <li class="hide-phone app-search mr-15">
                            <form role="search" class=""><input type="text" placeholder="Search..." class="form-control"> <button type="submit" class="mr-0"><i class="fa fa-search"></i></button></form>
                        </li>
                    </ul>
                </div>

                <div class="right-side-navbar d-flex align-items-center justify-content-end">
                    <!-- Mobile Trigger -->
                    <div class="right-side-trigger" id="rightSideTrigger">
                        <i class="ti-align-left"></i>
                    </div>

                    <!-- Top Bar Nav -->
                    <ul class="right-side-content d-flex align-items-center">
                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="border-radius-none" src="img/core-img/l3.jpg" alt=""></button>
                            <div class="dropdown-menu language-dropdown dropdown-menu-right">
                                <a href="#" class="dropdown-item"><img src="img/core-img/l1.jpg" alt=""> IND</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l2.jpg" alt=""> LOP</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l3.jpg" alt=""> KYI</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l4.jpg" alt=""> RTY</a>
                            </div>
                        </li>
                        <!-- Full Screen Mode -->
                        <li class="full-screen-mode ml-1">
                            <a href="javascript:" id="fullScreenMode"><i class="zmdi zmdi-fullscreen"></i></a>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon_globe-2" aria-hidden="true"></i></button>

                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- Top Message Area -->
                                <div class="top-message-area">
                                    <!-- Heading -->
                                    <div class="top-message-heading">
                                        <div class="heading-title">
                                            <h6>Messages</h6>
                                        </div>
                                        <span>5 New</span>
                                    </div>
                                    <div class="message-box" id="messageBox">
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>6-hour video course on Angular</span>
                                                <span>3 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>Google Ads: You'll get a refund soon</span>
                                                <span>27 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New Feature: HTTP Method Selection</span>
                                                <span>56 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>The Complete JavaScript Handbook</span>
                                                <span>1 hour ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New comment: ecaps Template</span>
                                                <span>2 days ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>6-hour video course on Angular</span>
                                                <span>3 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>Google Ads: You'll get a refund soon</span>
                                                <span>27 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New Feature: HTTP Method Selection</span>
                                                <span>56 min ago</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon_lightbulb_alt" aria-hidden="true"></i> <span class="active-status"></span></button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- Top Notifications Area -->
                                <div class="top-notifications-area">
                                    <!-- Heading -->
                                    <div class="notifications-heading">
                                        <div class="heading-title">
                                            <h6>Notifications</h6>
                                        </div>
                                        <span>5 New</span>
                                    </div>

                                    <div class="notifications-box" id="notificationsBox">
                                        <a href="#" class="dropdown-item"><i class="ti-face-smile bg-success"></i><span>We've got something for you!</span></a>
                                        <a href="#" class="dropdown-item"><i class="zmdi zmdi-notifications-active bg-danger"></i><span>Domain names expiring on Tuesday</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-check"></i><span>Your commissions has been sent</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-heart bg-success"></i><span>You sold an item!</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-bolt bg-warning"></i><span>Security alert for your linked Google account</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-face-smile bg-success"></i><span>We've got something for you!</span></a>
                                        <a href="#" class="dropdown-item"><i class="zmdi zmdi-notifications-active bg-danger"></i><span>Domain names expiring on Tuesday</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-check"></i><span>Your commissions has been sent</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-heart bg-success"></i><span>You sold an item!</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-bolt bg-warning"></i><span>Security alert for your linked Google account</span></a>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="border-radius-50" src="img/member-img/1.png" alt=""></button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- User Profile Area -->
                                <div class="user-profile-area">
                                    <div class="user-profile-heading">
                                        <!-- Thumb -->
                                        <div class="profile-thumbnail">
                                            <img class="border-radius-50" src="img/member-img/1.png" alt="">
                                        </div>
                                        <!-- Profile Text -->
                                        <div class="profile-text">
                                            <h6>Ajoy Das</h6>
                                            <span>ajoydas@example.com</span>
                                        </div>
                                    </div>
                                    <a href="#" class="dropdown-item"><i class="ti-user text-default" aria-hidden="true"></i> My profile</a>
                                    <a href="#" class="dropdown-item"><i class="zmdi zmdi-email-open text-success" aria-hidden="true"></i> Messages</a>
                                    <a href="#" class="dropdown-item"><i class="ti-settings text-default" aria-hidden="true"></i> Account settings</a>
                                    <a href="#" class="dropdown-item"><i class="ti-heart text-purple" aria-hidden="true"></i> Support</a>
                                    <a href="#" class="dropdown-item"><i class="ti-unlink text-warning" aria-hidden="true"></i> Sign-out</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </header>

            <!-- Main Content Area -->
            <div class="main-content">
                <!-- Basic Form area Start -->
                <div class="container-fluid">
                    <!-- Form row -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <h4 class="card-title">Bootstrap Select</h4>
                                        <div class="row">
                                            <div class="col-md-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Basic Select
                                                </div>
                                                <p>Use <code>.form-control</code> class for basic select control.</p>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="basicSelect">
                                                        <option>IT</option>
                                                        <option>Blade Runner</option>
                                                        <option>Thor Ragnarok</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Custom Select
                                                </div>
                                                <p>Use <code>.custom-select</code> class for Custom Select control.</p>
                                                <fieldset class="form-group">
                                                    <select class="custom-select" id="customSelect">
                                                        <option selected>Open this menu</option>
                                                        <option value="IT">IT</option>
                                                        <option value="Blade Runner">Blade Runner</option>
                                                        <option value="Thor Ragnarok">Thor Ragnarok</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Multiple Select
                                                </div>
                                                <p>Use <code>multiple</code> attribute for Multiple select control.</p>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="countrySelect" multiple="multiple">
                                                        <option selected="selected">Square</option>
                                                        <option>Rectangle</option>
                                                        <option selected="selected">Rombo</option>
                                                        <option>Romboid</option>
                                                        <option>Trapeze</option>
                                                        <option>Triangle</option>
                                                        <option selected="selected">Polygon</option>
                                                        <option>Regular polygon</option>
                                                        <option>Circumference</option>
                                                        <option>Circle</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Disabled Select
                                                </div>
                                                <p>Use <code>disabled</code> attribute for disabled select control.</p>
                                                <fieldset class="form-group">
                                                    <select class="form-control" disabled="disabled" id="disabledSelect">
                                                        <option>Green</option>
                                                        <option>Red</option>
                                                        <option>Blue</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <h4 class="card-title">Select2</h4>
                                        <div class="row">
                                            <div class="col-12 mb-2">
                                                <a href="https://select2.org/getting-started/installation" target="_blank">For more information </a>
                                            </div>
                                            <div class="col-sm-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Basic Select2
                                                </div>
                                                <p>Use <code>.select2</code> class for basic select2 control.</p>
                                                <div class="form-group">
                                                    <select class="select2 form-control">
                                                        <option value="square">Square</option>
                                                        <option value="rectangle">Rectangle</option>
                                                        <option value="rombo">Rombo</option>
                                                        <option value="romboid">Romboid</option>
                                                        <option value="trapeze">Trapeze</option>
                                                        <option value="traible">Triangle</option>
                                                        <option value="polygon">Polygon</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Single Select with Label
                                                </div>
                                                <p>Use <code>optgroup</code> attribute for basic select2 with Label control.</p>
                                                <div class="form-group">
                                                    <select class="select2 form-control">
                                                        <optgroup label="Figures">
                                                            <option value="romboid">Romboid</option>
                                                            <option value="trapeze">Trapeze</option>
                                                            <option value="triangle">Triangle</option>
                                                            <option value="polygon">Polygon</option>
                                                        </optgroup>
                                                        <optgroup label="Colors">
                                                            <option value="red">Red</option>
                                                            <option value="green">Green</option>
                                                            <option value="blue">Blue</option>
                                                            <option value="purple">Purple</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Select With Icon
                                                </div>
                                                <p>Use data attribute <code>data-icon</code> to add icon name for each options. And use class <code>.select2-icons</code> to set icon with option.</p>
                                                <div class="form-group">
                                                    <select data-placeholder="Select a state..." class="select2-icons form-control" id="select2-icons">
                                                        <optgroup label="Services">
                                                            <option value="wordpress2" data-icon="fa fa-wordpress" selected>WordPress</option>
                                                            <option value="codepen" data-icon="fa fa-codepen">Codepen</option>
                                                            <option value="drupal" data-icon="fa fa-drupal">Drupal</option>
                                                            <option value="pinterest2" data-icon="fa fa-css3">CSS3</option>
                                                            <option value="html5" data-icon="fa fa-html5">HTML5</option>
                                                        </optgroup>
                                                        <optgroup label="File types">
                                                            <option value="pdf" data-icon="fa fa-file-pdf-o">PDF</option>
                                                            <option value="word" data-icon="fa fa-file-word-o">Word</option>
                                                            <option value="excel" data-icon="fa fa-file-excel-o">Excel</option>
                                                            <option value="facebook" data-icon="fa fa-facebook-official">Facebook</option>
                                                        </optgroup>
                                                        <optgroup label="Browsers">
                                                            <option value="chrome" data-icon="fa fa-chrome">Chrome</option>
                                                            <option value="firefox" data-icon="fa fa-firefox">Firefox</option>
                                                            <option value="safari" data-icon="fa fa-safari">Safari</option>
                                                            <option value="opera" data-icon="fa fa-opera">Opera</option>
                                                            <option value="IE" data-icon="fa fa-internet-explorer">IE</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-12">
                                                <div class="text-bold-600 font-medium-2">
                                                    Template support
                                                </div>
                                                <p>Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the <code>classic</code> theme, which matches the old look of Select2.</p>
                                                <div class="form-group">
                                                    <select class="select2-theme form-control" id="select2-theme">
                                                        <optgroup label="Figures">
                                                            <option value="romboid">Romboid</option>
                                                            <option value="trapeze">Trapeze</option>
                                                            <option value="triangle">Triangle</option>
                                                            <option value="polygon">Polygon</option>
                                                        </optgroup>
                                                        <optgroup label="Colors">
                                                            <option value="red">Red</option>
                                                            <option value="green">Green</option>
                                                            <option value="blue">Blue</option>
                                                            <option value="purple">Purple</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">Colorpicker</h4>
                                    <p class="sub-header">Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4</p>

                                    <div class="form-group mb-3">
                                        <label>Default</label>
                                        <input type="text" id="basic-colorpicker" class="form-control" placeholder="Basic colorpicker">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Hexa Color</label>
                                        <input type="text" id="hexa-colorpicker" class="form-control" value="#4a81d4">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>As Component</label>
                                        <div id="component-colorpicker" class="input-group" title="Using format option">
                                            <input type="text" class="form-control input-lg" value="#305AA2" />
                                            <span class="input-group-append">
                                                <span class="input-group-text colorpicker-input-addon"><i></i></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Horizontal</label>
                                        <input type="text" id="horizontal-colorpicker" class="form-control" value="#8fff00">
                                    </div>

                                    <div class="form-group mb-0">
                                        <label>Inline</label>
                                        <div id="inline-colorpicker"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card ">
                                <div class="card-body">
                                    <h4 class="header-title">Clock Picker</h4>
                                    <p class="sub-header">A clock-style timepicker for Bootstrap.</p>

                                    <div class="form-group mb-3">
                                        <label>Default Clock Picker</label>
                                        <div class="input-group clockpicker">
                                            <input type="text" class="form-control" value="09:30">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="ti-time"></i></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Auto close</label>
                                        <div class="input-group clockpicker" data-placement="top" data-align="top" data-autoclose="true">
                                            <input type="text" class="form-control" value="13:14">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="ti-time"></i></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Now time</label>
                                        <div class="input-group m-b-20">
                                            <input class="form-control" id="single-input" type="text" value="" placeholder="Now">
                                            <div class="input-group-append">
                                                <button type="button" id="check-minutes" class="btn waves-effect waves-light btn-primary">Check </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label>Place at left, align the arrow to top </label>
                                        <div class="input-group clockpicker" data-placement="top" data-align="top">
                                            <input type="text" class="form-control" value="13:14">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="ti-time"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card bg-boxshadow mb-3">
                                <div class="card-body">
                                    <h4 class="header-title">Bootstrap Datepicker</h4>
                                    <p class="sub-header">Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.</p>

                                    <div class="form-group mb-3">
                                        <label>Date Picker</label>
                                        <input type="text" class="form-control" data-provide="datepicker">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Date View</label>
                                        <input type="text" class="form-control" data-provide="datepicker" data-date-format="d-M-yyyy">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Multi Datepicker</label>
                                        <input type="text" class="form-control" data-provide="datepicker" data-date-multidate="true">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Autoclose</label>
                                        <input type="text" class="form-control" data-provide="datepicker" data-date-autoclose="true">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Month View</label>
                                        <input type="text" class="form-control" data-provide="datepicker" data-date-format="MM yyyy" data-date-min-view-mode="1">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Year View</label>
                                        <input type="text" class="form-control" data-provide="datepicker" data-date-min-view-mode="2">
                                    </div>

                                    <div class="form-group">
                                        <label>Inline Datepicker</label>
                                        <div data-provide="datepicker-inline"></div>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="col-lg-6">
                            <div class="card card-body">
                                <h4 class="card-title">Sample Basic Forms</h4>
                                <div class="row">
                                    <div class="col-sm-12 col-xs-12">
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleInputEmail111">User Name</label>
                                                <input type="text" class="form-control" id="exampleInputEmail111" placeholder="Enter Username">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputEmail12">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail12" placeholder="Enter email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword11">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword11" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword12">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword12" placeholder="Confirm Password">
                                            </div>
                                            <div class="form-group">
                                                <div class="custom-control custom-checkbox mr-sm-2">
                                                    <input type="checkbox" class="custom-control-input" id="checkbox1" value="check">
                                                    <label class="custom-control-label" for="checkbox1">Remember Me</label>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-success mr-2">Submit</button>
                                            <button type="submit" class="btn btn-dark">Cancel</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Form row</h4>
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="inputEmail4" class="col-form-label">Email</label>
                                                <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="inputPassword4" class="col-form-label">Password</label>
                                                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="inputAddress" class="col-form-label">Address</label>
                                            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                        </div>

                                        <div class="form-group">
                                            <label for="inputAddress2" class="col-form-label">Address 2</label>
                                            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                        </div>

                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="inputCity" class="col-form-label">City</label>
                                                <input type="text" class="form-control" id="inputCity">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="inputState" class="col-form-label">State</label>
                                                <select id="inputState" class="form-control">
                                                    <option>Choose</option>
                                                    <option>Option 1</option>
                                                    <option>Option 2</option>
                                                    <option>Option 3</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-2">
                                                <label for="inputZip" class="col-form-label">Zip</label>
                                                <input type="text" class="form-control" id="inputZip">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="customCheck11">
                                                <label class="custom-control-label" for="customCheck11">Check this custom checkbox</label>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-primary">Sign in</button>

                                    </form>

                                </div> <!-- end card-body -->
                            </div> <!-- end card-->
                        </div> <!-- end col -->

                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Basic form elements</h4>
                                    <p class="card-description">
                                        Basic form elements
                                    </p>
                                    <form class="forms-sample">
                                        <div class="form-group">
                                            <label for="exampleInputName1">Name</label>
                                            <input type="text" class="form-control" id="exampleInputName1" placeholder="Name">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail3">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword4">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword4" placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleSelectGender">Gender</label>
                                            <select class="form-control" id="exampleSelectGender">
                                                <option>Male</option>
                                                <option>Female</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>File upload</label>
                                            <input type="file" name="img[]" class="file-upload-default">
                                            <div class="input-group col-xs-12">
                                                <input type="text" class="form-control file-upload-info" disabled="" placeholder="Upload Image">
                                                <span class="input-group-append">
                                                    <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputCity1">City</label>
                                            <input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleTextarea1">Textarea</label>
                                            <textarea class="form-control" id="exampleTextarea1" rows="4"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                        <button class="btn btn-light">Cancel</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h4 class="card-title mb-2">Select menu</h4>
                                            <p class="text-muted">
                                                Custom <code>&lt;select&gt;</code> menus need only a custom class, <code>.custom-select</code> to trigger the custom styles.
                                            </p>

                                            <select class="custom-select mt-3">
                                                <option selected="">Open this select menu</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>

                                            <h4 class="card-title mb-2 mt-4">Switches</h4>
                                            <p class="text-muted">
                                                A switch has the markup of a custom checkbox but uses the <code>.custom-switch</code> class to render a toggle switch. Switches also support the <code>disabled</code> attribute.
                                            </p>

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="customSwitch1">
                                                <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
                                            </div>
                                            <div class="custom-control custom-switch mt-1">
                                                <input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2">
                                                <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
                                            </div>

                                        </div> <!-- end col -->

                                        <div class="col-md-6">
                                            <h4 class="card-title mb-2 mt-5 mt-sm-0">Checkboxes and radios</h4>
                                            <div class="mt-3">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                                                    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="customCheck2">
                                                    <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
                                                </div>
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
                                                </div>
                                            </div>
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->

                                </div> <!-- end card-body-->
                            </div> <!-- end card -->
                        </div> <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">

                                    <h4 class="card-title mb-2">Input Sizes</h4>
                                    <p class="text-muted">
                                        Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.
                                    </p>

                                    <form>
                                        <div class="form-group mb-3">
                                            <label for="example-input-small">Small</label>
                                            <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder=".input-sm">
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="example-input-normal">Normal</label>
                                            <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="example-input-large">Large</label>
                                            <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder=".input-lg">
                                        </div>

                                        <div class="form-group mb-2">
                                            <label for="example-gridsize">Grid Sizes</label>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <input type="text" id="example-gridsize" class="form-control" placeholder=".col-sm-4">
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div> <!-- end card-body -->
                            </div> <!-- end card -->
                        </div> <!-- end col -->

                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">

                                    <h4 class="card-title mb-2">Input Group</h4>
                                    <p class="text-muted">
                                        Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
                                    </p>

                                    <form>

                                        <div class="form-group mb-3">
                                            <label>Static</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">@</span>
                                                </div>
                                                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                                            </div>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Dropdowns</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <button class="btn btn-primary   dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Action</a>
                                                        <a class="dropdown-item" href="#">Another action</a>
                                                        <a class="dropdown-item" href="#">Something else here</a>
                                                    </div>
                                                </div>
                                                <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                                            </div>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Buttons</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
                                                <div class="input-group-append">
                                                    <button class="btn btn-dark  " type="button">Button</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label>Custom file input</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="inputGroupFile04">
                                                    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div> <!-- end card-body -->
                            </div> <!-- end card -->
                        </div> <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title mb-2">Input Types</h4>
                                    <p class="text-muted">
                                        Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.
                                    </p>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <form>

                                                <div class="form-group mb-3">
                                                    <label for="simpleinput">Text</label>
                                                    <input type="text" id="simpleinput" class="form-control">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-email">Email</label>
                                                    <input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-password">Password</label>
                                                    <input type="password" id="example-password" class="form-control" value="password">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-palaceholder">Placeholder</label>
                                                    <input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-textarea">Text area</label>
                                                    <textarea class="form-control" id="example-textarea" rows="5"></textarea>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-readonly">Readonly</label>
                                                    <input type="text" id="example-readonly" class="form-control" readonly value="Readonly value">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-disable">Disabled</label>
                                                    <input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-static">Static control</label>
                                                    <input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
                                                </div>

                                                <div class="form-group mb-0">
                                                    <label for="example-helping">Helping text</label>
                                                    <input type="text" id="example-helping" class="form-control" placeholder="Helping text">
                                                    <span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
                                                </div>

                                            </form>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <form>

                                                <div class="form-group mb-3">
                                                    <label for="example-select">Input Select</label>
                                                    <select class="form-control" id="example-select">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-multiselect">Multiple Select</label>
                                                    <select id="example-multiselect" multiple="" class="form-control">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-fileinput">Default file input</label>
                                                    <input type="file" id="example-fileinput" class="form-control-file">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-date">Date</label>
                                                    <input class="form-control" id="example-date" type="text" name="date">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-month">Month</label>
                                                    <input class="form-control" id="example-month" type="text" name="month">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-time">Time</label>
                                                    <input class="form-control" id="example-time" type="text" name="time">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-week">Week</label>
                                                    <input class="form-control" id="example-week" type="text" name="week">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-number">Number</label>
                                                    <input class="form-control" id="example-number" type="number" name="number">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="example-color">Color</label>
                                                    <input class="form-control" id="example-color" type="text" name="color">
                                                </div>

                                                <div class="form-group mb-0">
                                                    <label for="example-range">Range</label>
                                                    <input class="custom-range" id="example-range" type="range" name="range" min="0" max="100">
                                                </div>

                                            </form>
                                        </div> <!-- end col -->
                                    </div>
                                    <!-- end row-->
                                </div> <!-- end card-body -->
                            </div> <!-- end card -->
                        </div><!-- end col -->
                    </div>
                    <!-- end row -->
                    <!-- Small Chat Box -->
                    <div class="small-chat-box fadeInRight animated">
                        <div class="heading d-flex align-items-center" draggable="true">
                            <img class="chat-thumb mr-3" src="img/member-img/1.png" alt="">
                            <div class="chat-header">
                                <h6 class="mb-0">Jhon Smith</h6>
                                <p class="mb-0 font-12 text-green">Active</p>
                            </div>
                        </div>

                        <div class="chat-history bg-img" id="chat-conversation" style="background-image: url(img/bg-img/4.jpg);">
                            <ul>
                                <li class="clearfix mb-15">
                                    <div class="message-data text-right">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/1.png" alt=""></span>
                                        <span class="message-data-time font-11">11:11 AM, Today</span>
                                    </div>
                                    <div class="message other-message float-right font-12">Hi Robert , how are you?</div>
                                </li>
                                <li class="clearfix mb-15">
                                    <div class="message-data">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/2.png" alt=""></span>
                                        <span class="message-data-time font-11">11:15 AM, Today</span>
                                    </div>
                                    <div class="message my-message font-12">Fine. and you?</div>
                                </li>
                                <li class="clearfix mb-15">
                                    <div class="message-data">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/2.png" alt=""></span>
                                        <span class="message-data-time font-11">11:16 AM, Today</span>
                                    </div>
                                    <div class="message my-message font-12">Fine. What's about vacation?.</div>
                                </li>
                                <li class="clearfix">
                                    <div class="message-data text-right">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/1.png" alt=""></span>
                                        <span class="message-data-time font-11">11:18 AM, Today</span>
                                    </div>
                                    <div class="message other-message float-right font-12">We think for next weekend.</div>
                                    <div class="message other-message float-right font-12">Have fun!</div>
                                </li>
                            </ul>
                        </div>

                        <div class="form-chat">
                            <div class="input-group chat-group">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button">Send
                                    </button> </span></div>
                        </div>
                    </div>
                    <div id="small-chat">
                        <span class="badge badge-primary float-right">6</span>
                        <a class="open-small-chat pulse" href="#">
                            <i class="zmdi zmdi-comment-more"></i>
                        </a>
                    </div>
                </div>

                <!-- Footer Area -->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <!-- Footer Area -->
                            <footer class="footer-area">
                                <!-- Copywrite Text -->
                                <div class="copywrite-text text-center">
                                    <p>Undex &copy; 2019 created by <a href="#">Theme-zome</a></p>
                                </div>
                            </footer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================================
    ********* Page Wrapper Area End ***********
    ======================================= -->

    <!-- Must needed plugins to the run this Template -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bundle.js"></script>

    <!-- Active JS -->
    <script src="js/default-assets/fullscreen.js"></script>
    <script src="js/default-assets/active.js"></script>

    <!-- These plugins only need for the run this page -->
    <script src="js/default-assets/file-upload.js"></script>
    <script src="js/default-assets/basic-form.js"></script>
    <script src="js/default-assets/jquery.bootstrap-touchspin.min.js"></script>
    <script src="js/default-assets/jquery.bootstrap-touchspin.custom.js"></script>
    <script src="js/bootstrap-colorpicker.min.js"></script>
    <script src="js/default-assets/colorpicker-bootstrap.js"></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <script src="js/default-assets/daterange-picker.js"></script>
    <script src="js/default-assets/form-picker.js"></script>
    <script src="js/default-assets/select2.js"></script>
    <script src="js/default-assets/dashboard-chat.js"></script>

</body>


</html>